<template>
  <view class="order">
    <uni-nav-bar title="确认订单" background-color="#c00" color="#fff" left-icon="left" statusBar @clickLeft="gotoback"/>
    <view class="address" :style="{height: addr.name ? '180rpx' : '230rpx'}">
      <van-button 
      type="info" 
      style="letter-spacing: 2rpx;" 
      @click="goMyAddress"
      v-if="!addr.name"
      >+选择收货地址
      </van-button>
      <view class="addr_con" v-else @click="goMyAddress">
        <view class="name_mobile">
          <view class="name">
            收货人: {{ addr.name }}
          </view>
          <view class="mobile">
            <text>联系电话: {{addr.mobile}}</text>
            <van-icon name="arrow" />
          </view>
        </view>
        <view class="addr">
          收货地址: {{ addr.addr }}
        </view>
      </view>
      <img src="../../static/addrborder.png" alt="">
    </view>
    <view class="content" :style="{height: `calc( 100vh - ${ addr.name ? '430rpx' : '580rpx' } )`}">
      <van-card
        v-for="(item, index) in orderList"
        :key="index"
        :num="item.goods_count"
        :price="item.goods_price"
        :title="item.goods_name"
        :thumb="item.goods_small_logo"
        :thumb-link="'/pages/shopdetail/shopdetail?goods_id=' + item.goods_id"
      />
    </view>
    <van-submit-bar
      :disabled="!addr.name"
      :price="total"
      button-text="提交订单"
      
    >
      <view slot="tip" style="display: flex;" v-if="!addr.name">
        <van-icon name="info-o"/>
        <text>请选择收货地址</text>
      </view>
    </van-submit-bar>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        orderList:wx.getStorageSync("shopcarlist").filter(item => item.is_promote),
        addr:{},
        addrindex:0,
      }
    },
    onLoad(options){
      if(options.name) {
        this.addr = {...options}
        this.addrindex = options.currentAddr
      }
    },
    methods: {
      goMyAddress(){
        wx.navigateTo({url:"/pages/myAddress/myAddress?currentAddr="+this.addrindex})
      },
      gotoback(){
        wx.switchTab({url:"/pages/cart/cart"})
      }
    },
    computed:{
      total(){
        let num = 0;
        this.orderList.forEach(item =>{
          num += (item.goods_price * item.goods_count)
        });
        return num * 100;
      }
    }
  }
</script>

<style scoped lang="scss">
  .order{
    .address{
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      padding: 10rpx;
      box-sizing: border-box;
      background-color: #fff;
      img{
        position: absolute;
        height: 15rpx;
        width: 100%;
        bottom: 0;
      }
      .addr_con{
        width: 100%;
        height: calc( 100% - 40rpx );
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        font-size: 26rpx;
        text-shadow: 0 1rpx 0 #555;
        color: #555;
        .name_mobile{
          display: flex;
          justify-content: space-between;
          .mobile{
            display: flex;
            align-items: center;
          }
        }
      }
    }
    .content{
      overflow: auto;
    }
  }
</style>
